<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('级别')" prop="grade">
            <dict-select
              v-model="form.grade"
              :disabled="disableSel"
              dictionary="bf_evaluation_grade"
              :placeholder="$t('级别')"
              @change="changeGrade"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.grade === '2' || form.grade === '3'" :span="12">
          <el-form-item :label="$t('所属上级')" prop="parentId">
            <el-select v-model="form.parentId" :placeholder="$t('所属上级')" :disabled="disableSel">
              <el-option
                v-for="dict in parentOptions"
                :key="dict.id"
                :label="dict.indicators"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('指标')" prop="indicators">
            <el-input v-model="form.indicators" :placeholder="$t('指标')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('权重')" prop="weight">
            <Money v-model="form.weight" :placeholder="$t('权重')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('排序')" prop="sort">
            <el-input-number v-model="form.sort" />
          </el-form-item>
        </el-col>
        <el-col v-show="form.grade === '3'" :span="12">
          <el-form-item :label="$t('实现类')">
            <el-input v-model="form.implClass" :placeholder="$t('实现类')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-col v-show="form.grade === '3'" :span="24">
        <div class="area-header" style="margin-top: 10px">
          <span class="area-header-title">{{ $t("查询指标的Sql") }}
            <el-tooltip placement="top">
              <div slot="content">
                {{ $t('内置参数') }}<br>
                ${fundId}:{{ $t('fundId') }}<br>
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
        </div>
        <el-row>
          <el-row>
            <el-col v-show="form.grade === '3'" :span="24">
              <el-form-item prop="conditionSql">
                <span slot="label">
                  {{ $t('取数逻辑') }}
                  <el-tooltip placement="top">
                    <div slot="content">
                      {{ $t('内置参数') }}<br>
                      ${fundId}:{{ $t('基金ID') }}<br>
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <textarea ref="conditionSql" v-model="form.conditionSql" class="codesql" style="height:200px;width:600px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="area-header">
            <span class="area-header-title">{{ $t('参数规则') }}</span>
          </div>
          <el-table
            :data="form.parameterRules"
            style="width: 100%"
            class="nowrapTable formTable"
            border
          >
            <el-table-column prop="area" :label="$t('规则名称')" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>{{ $t('规则名称') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'parameterRules.' + scope.$index + '.ruleName'" :rules="parameterRuleRules.ruleName">
                  <el-input v-model="scope.row.ruleName" :placeholder="$t('规则名称')" show-word-limit maxlength="100" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="area" :label="$t('规则标识')" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>{{ $t('规则标识') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'parameterRules.' + scope.$index + '.parameterCode'" :rules="parameterRuleRules.parameterCode">
                  <el-input v-model="scope.row.parameterCode" :placeholder="$t('规则标识')" show-word-limit maxlength="100" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="area" :label="$t('调用方式')" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>{{ $t('调用方式') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'parameterRules.' + scope.$index + '.isImplClass'" :rules="parameterRuleRules.isImplClass">
                  <el-radio-group v-model="scope.row.isImplClass">
                    <el-radio label="0">SQL</el-radio>
                    <el-radio label="1">实现类</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="area" :label="$t('匹配规则')" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>{{ $t('匹配规则') }}</span>
              </template>
              <template slot-scope="scope">
                <template v-if="scope.row.isImplClass=='1'">
                  <el-form-item :prop="'parameterRules.' + scope.$index + '.implClass'" :rules="parameterRuleRules.implClass">
                    <el-input v-model="scope.row.implClass" :placeholder="$t('实现类名')" show-word-limit maxlength="100" />
                  </el-form-item>
                </template>
                <template v-else>
                  <el-form-item :prop="'parameterRules.' + scope.$index + '.conditionSql'" :rules="parameterRuleRules.conditionSql">
                    <el-input v-model="scope.row.conditionSql" disabled>
                      <template slot="append">
                        <el-button
                          v-if="scope.row.conditionSql === undefined || scope.row.conditionSql === null || scope.row.conditionSql === ''"
                          slot="append"
                          size="mini"
                          type="info"
                          icon="el-icon-plus"
                          circle
                          @click="conditionSql(scope.$index)"
                        />
                        <el-button
                          v-else
                          slot="append"
                          size="mini"
                          type="success"
                          icon="el-icon-check"
                          circle
                          @click="conditionSql(scope.$index)"
                        />
                      </template>
                    </el-input>
                  </el-form-item>
                </template>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="area" :label="$t('实现类名')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949; margin-right: 4px">*</i>
            <span>{{ $t('实现类名') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'parameterRules.' + scope.$index + '.implClass'" :rules="parameterRuleRules.implClass">
              <el-input v-model="scope.row.implClass" :placeholder="$t('实现类名')" show-word-limit maxlength="100" />
            </el-form-item>
          </template>
        </el-table-column> -->

            <el-table-column
              :label="$t('操作')"
              align="center"
              class-name="small-padding fixed-width"
              width="140"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="delParameterRule(scope.$index, scope.row)"
                >{{ $t("删除") }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tol">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addParameterRule"
            >{{ $t("添加") }}</el-button>
          </div>

          <div class="area-header" style="margin-top:5px">
            <span class="area-header-title">{{ $t('评分标准') }}</span>
          </div>
          <el-table
            :data="form.indexRule"
            style="width: 100%"
            class="nowrapTable formTable"
            border
          >
            <el-table-column prop="area" label="启用区间判断" align="center" width="180">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>启用区间判断</span>
              </template>
              <template slot-scope="scope">
                <el-form-item>
                  <el-radio-group v-model="scope.row.enableSection">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="左区间" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>左区间</span>
              </template>
              <template slot-scope="scope">
                <el-row :gutter="10">
                  <el-col span="12">
                    <el-form-item>
                      <dict-select
                        v-show="scope.row.enableSection==='1'"
                        v-model="scope.row.leftSection"
                        dictionary="comparison_operators"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col span="12">
                    <el-form-item>
                      <el-input v-show="scope.row.enableSection==='1'" v-model="scope.row.leftValue" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="区间关系" align="center" width="120">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>区间关系</span>
              </template>
              <template slot-scope="scope">
                <el-form-item>
                  <dict-select
                    v-show="scope.row.enableSection==='1'"
                    v-model="scope.row.maping"
                    dictionary="section_relation"
                  />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="area" label="右区间" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>右区间</span>
              </template>
              <template slot-scope="scope">
                <el-row :gutter="10">
                  <el-col span="12">
                    <el-form-item>
                      <dict-select
                        v-show="scope.row.enableSection==='1'"
                        v-model="scope.row.rightSection"
                        dictionary="comparison_operators"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item>
                      <el-input v-show="scope.row.enableSection==='1'" v-model="scope.row.rightValue" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="使用公式" align="center" width="180">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>使用公式</span>
              </template>
              <template slot-scope="scope">
                <el-form-item>
                  <el-radio-group v-model="scope.row.enableFormula">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="得分公式(结果可当得分)" align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'indexRule.' + scope.$index + '.formula'"
                  :rules="indexRuleRules.formula"
                >
                  <el-input v-show="scope.row.enableFormula==='1'" v-model="scope.row.formulaLabel" disabled>
                    <template slot="append">
                      <el-button icon="el-icon-plus" @click="selectFormula(scope.$index,scope.row)" />
                    </template>
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="得分" align="center" width="180">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949; margin-right: 4px">*</i>
                <span>得分</span>
              </template>
              <template slot-scope="scope">
                <el-form-item>
                  <el-input-number
                    v-show="scope.row.enableFormula==='0'"
                    v-model="scope.row.score"
                    :min="0"
                    :max="100"
                    controls-position="right"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('操作')"
              align="center"
              class-name="small-padding fixed-width"
              width="140"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="delIndexRule(scope.$index, scope.row)"
                >{{ $t("删除") }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tol">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addIndexRule"
            >{{ $t("添加") }}</el-button>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('备注')" prop="remark">
                <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('备注')" />
              </el-form-item>
            </el-col>
          </el-row>

        </el-row>
      </el-col></el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="bf:evaluation" />
    </div>

    <!-- 添加或修改关键指标公式（系统模板）对话框 -->
    <el-dialog v-el-drag-dialog :title="$t('选择公式')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogFormGS" append-to-body>
      <bfEvaluationDetailFormula ref="bfEvaluationDetailFormula" :formula="formula" :show-date="false" />
    </el-dialog>

    <!-- 条件SQL -->
    <el-dialog
      :title="$t('条件SQL')"
      :visible="sqlOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      append-to-body
      @close="sqlOpen = false"
    >
      <div v-loading="sqlLoading">
        <el-form ref="form" :model="parameterRuleForm" :rules="rules" label-width="120px" class="dataForm">
          <el-row>
            <el-col span="12">
              <el-form-item :label="$t('条件SQL')" prop="conditionSql">
                <textarea
                  ref="conditionSql"
                  v-model="parameterRuleForm.conditionSql"
                  class="codesql"
                  style="height:200px;width:100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--      <el-row>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item :label="$t('条件SQL')" prop="conditionSql">-->
      <!--            <textarea ref="conditionSql" v-model="form.conditionSql" class="codesql" style="height:200px;width:600px;" />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click="sqlOpen = false">{{ $t("取消") }}</el-button>
        <save-btn has-permi="deal:meeting" :function="saveSQL" :cancel-show="false" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveBfEvaluationDetail,
  getBfEvaluationDetail,
  listBfEvaluationDetail,
  delBfEvaluationDetailRule
} from '@/api/deal/bf/evaluation/bfEvaluationDetail'
import {
  delBfEvaluationDetailParameterRule
} from '@/api/deal/bf/evaluation/bfEvaluationDetailParameterRule'

    import 'codemirror/theme/ambiance.css'
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/addon/hint/show-hint.css'
    import bfEvaluationDetailFormula from '@/views/deal/bf/evaluation/bfEvaluationDetailFormula'
    const CodeMirror = require('codemirror/lib/codemirror')
    require('codemirror/addon/edit/matchbrackets')
    require('codemirror/addon/selection/active-line')
    require('codemirror/mode/sql/sql')
    require('codemirror/addon/hint/show-hint')
    require('codemirror/addon/hint/sql-hint')
export default {
    name: 'CodeMirror',
    components: {
      bfEvaluationDetailFormula
    },
   data() {
    return {
      // 是否可以选择
      disableSel: false,
      // 表单参数
      form: {
         indexRule: [], // 指标规则
         parameterRules: [] // 参数规则
      },
      typeId: undefined,
      parameterRuleForm: {
        conditionSql: undefined
      },
      // 遮罩层
      loading: false,
      sqlLoading: false,
      // 表单校验
      rules: {
        grade: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        weight: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        parentId: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        indicators: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        sort: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]

      },
       indexRuleRules: {
          gtEq: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ],
          ltEq: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ],
          score: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ]
            },
      parameterRuleRules: {
        ruleName: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
      },
      // 所属上级
      parentOptions: [],
      // 是否
      yesNoOptions: [],
      // 所属上级查询参数
      queryParams: {
        typeId: undefined,
        grade: '1'
      },
      indicatorsSqlEditor: {},
      formula: {},
      formOpen: false,
      sqlOpen: false,
      index: undefined
    }
  },
  created() {
    this.getDicts('sys_yes_no').then(response => {
      this.yesNoOptions = response.data
    })
  },
  mounted() {

  },
  methods: {
    // 初始化数据
    init(id, typeId) {
      this.loading = true
      this.disableSel = false
      if (id !== null && id !== undefined) {
        getBfEvaluationDetail(id).then(response => {
          this.form = response.data
          this.disableSel = false
          this.form.typeId = typeId
          this.typeId = typeId
          // this.indicatorsSqlEditor.setValue(this.form.conditionSql !== null ? this.form.conditionSql : '')
          // this.changeGrade()
          this.changeGrade(this.form.grade, this.form.parentId)
            this.loading = false
        })
      } else {
        this.reset()
        this.form.typeId = typeId
        this.typeId = typeId
        this.loading = false
      }
    },
    // 新增下级
    initNext(data, typeId) {
      this.reset()
      if (data.grade === '1') {
        this.form.grade = '2'
      } else {
        this.form.grade = '3'
      }
      this.disableSel = true
      this.changeGrade(this.form.grade, data.id)
      this.form.typeId = typeId
      this.typeId = typeId
    },
    // 获取所属上级
    changeGrade(val, parentId) {
      if (val === '2') {
        this.queryParams.grade = '1'
      } else {
        this.queryParams.grade = '2'
      }
      this.form.parentId = ''
      this.queryParams.typeId = this.typeId
      listBfEvaluationDetail(this.queryParams).then(response => {
        this.parentOptions = response.rows
      })
      this.$nextTick(() => {
        if (parentId) {
          this.form.parentId = parentId
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        typeId: undefined,
        grade: undefined,
        indicators: undefined,
        weight: undefined,
        sort: undefined,
        parentId: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        remark: undefined,
        conditionSql: undefined

      }
      // this.indicatorsSqlEditor.setValue('')
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      //  this.form.conditionSql = this.indicatorsSqlEditor.getValue()
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveBfEvaluationDetail(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    },
    delIndexRule(index, row) {
      console.log(row)
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
          .then(() => {
            // 调用接口
            delBfEvaluationDetailRule(id)
            this.form.indexRule.splice(index, 1)
            return this.msgSuccess(this.$t('删除成功'))
          })
          .catch(function() {})
      } else {
        this.form.indexRule.splice(index, 1)
      }
    },
    delParameterRule(index, row) {
      console.log(row)
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
          .then(() => {
            // 调用接口
            delBfEvaluationDetailParameterRule(id)
            this.form.parameterRules.splice(index, 1)
            return this.msgSuccess(this.$t('删除成功'))
          })
          .catch(function() {})
      } else {
        this.form.parameterRules.splice(index, 1)
      }
    },
    // 添加评分规则
    addIndexRule() {
      const row = {
        enableSection: '1',
        leftSection: undefined,
        leftValue: undefined,
        maping: 'none',
        rightSection: undefined,
        rightValue: undefined,
        score: undefined,
        enableFormula: '0',
        scoreFormula: undefined,
        formulaLabel: undefined
      }
      // 防止报错
       if (!(this.form.indexRule instanceof Array)) {
        this.$set(this.form, 'indexRule', [])
      }
      this.$nextTick(() => {
        this.form.indexRule.push(row)
      })
    },
    addParameterRule() {
      const row = {
        id: undefined,
        bfDetailId: undefined,
        ruleName: undefined,
        conditionSql: undefined,
        parameterCode: undefined,
        isImplClass: '0',
        implClass: undefined
      }
      // 防止报错
      if (!(this.form.parameterRules instanceof Array)) {
        this.$set(this.form, 'parameterRules', [])
      }
      this.$nextTick(() => {
        this.form.parameterRules.push(row)
      })
    },
    selectFormula(index, data) {
      this.index = index
      this.formOpen = true
      this.formula = {
        parameterRules: this.form.parameterRules,
        name: this.form.indexRule[index].formulaLabel,
        code: this.form.indexRule[index].scoreFormula
      }
       data.formulaLabel = this.form.indexRule[index].formulaLabel
    },
    addFormula(name, code) {
        this.form.indexRule[this.index].formulaLabel = name
        this.form.indexRule[this.index].scoreFormula = code
    },
    conditionSql(index) {
      this.sqlOpen = true
      // this.initCodeStyle()
      this.sqlLoading = true
      this.index = index
      this.parameterRuleForm.conditionSql = this.form.parameterRules[index].conditionSql
      this.sqlLoading = false
    },
    saveSQL() {
      this.sqlOpen = false
      this.form.parameterRules[this.index].conditionSql = this.parameterRuleForm.conditionSql
      this.sqlOpen = false
    },
    initCodeStyle() {
      const mime = 'text/x-mariadb'
    // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
    this.indicatorsSqlEditor = CodeMirror.fromTextArea(this.$refs.conditionSql, {
      mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      // theme: theme,
      // autofocus: true,
      extraKeys: { 'Ctrl': 'autocomplete' }, // 自定义快捷键
      hintOptions: { // 自定义提示选项
        tables: {
          users: ['name', 'score', 'birthDate'],
          countries: ['name', 'population', 'size']
        }
      }
    })
    this.indicatorsSqlEditor.on('cursorActivity', function() {
      if (this !== null) {
        this.indicatorsSqlEditor.showHint()
      }
    })
    }

  }

}
</script>
<style scoped>
  .colorChoose li.active {
    position: relative;
  }

  .colorChoose li.active:after {
    position: absolute;
    content: '';
    display: block;
    top: 15px;
    right: 18px;
    width: 6px;
    height: 11px;
    border-style: solid;
    border-color: white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
  }

  .colorChoose li {
    float: left;
    cursor: pointer;

  }

  .colorChoose li span {
    height: 24px;
    width: 24px;
    display: block;
    margin: 10px;
  }
  .codesql {
    font-size: 11pt;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  }
</style>
